<!--
 * @Author: Xujianchen
 * @Date: 2024-07-29 11:14:38
 * @LastEditors: xujianchen
 * @LastEditTime: 2024-07-29 16:25:46
 * @Description: 头部数据卡片
-->
<template>
  <el-row :gutter="30">
    <el-col
      v-for="item in cardList"
      :key="item.id"
      :lg="6"
    >
      <el-card shadow="never">
        <div class="header flex">
          <icon
            :name="item.icon"
            :color="item.color"
            :size="38"
          />
          <div class="total">
            <span>{{ item.title }}</span>
            <count-up
              :end="item.value"
              use-group
            />
          </div>
        </div>
        <div
          :id="item.id"
          class="chart-item"
        ></div>
      </el-card>
    </el-col>
  </el-row>
</template>

<script setup>
import CountUp from './countup'

const { Bullet, Area, Pie, Column } = window.G2Plot
const cardList = [
  {
    title: '总收入',
    value: 95293,
    color: '#FAD029',
    id: 'income',
    icon: 'WalletFilled',
    render: renderIncome,
  },
  {
    title: '好评数',
    value: 67354,
    color: '#65EA91',
    id: 'rate',
    icon: 'StarFilled',
    render: renderRate,
  },
  {
    title: '日活跃',
    value: 1273,
    color: '#d897eb',
    id: 'customer',
    icon: 'Histogram',
    render: renderCustomer,
  },
  {
    title: '已售出',
    value: 284,
    color: '#f69899',
    id: 'soldOut',
    icon: 'GoodsFilled',
    render: renderSoldOut,
  },
]

onMounted(() => {
  cardList.forEach((item) => {
    item.render()
  })
})

function renderRate() {
  const data = [{ title: '满意度', ranges: [40, 70, 100], measures: [30, 50], target: 85 }]
  const bulletPlot = new Bullet('rate', {
    data,
    measureField: 'measures',
    rangeField: 'ranges',
    targetField: 'target',
    xField: 'title',
    color: {
      range: ['#FFbcb8', '#FFe0b0', '#bfeec8'],
      measure: ['#5B8FF9', '#61DDAA'],
      target: '#39a3f4',
    },
    label: { measure: { position: 'middle', style: { fill: '#fff' } } },
    xAxis: { line: null },
    yAxis: false,
    tooltip: { showMarkers: false, shared: true },
    // 自定义 legend
    legend: {
      custom: true,
      position: 'bottom',
      items: [
        {
          value: '差',
          name: '差',
          marker: { symbol: 'square', style: { fill: '#FFbcb8', r: 5 } },
        },
        {
          value: '良',
          name: '良',
          marker: { symbol: 'square', style: { fill: '#FFe0b0', r: 5 } },
        },
        {
          value: '优',
          name: '优',
          marker: { symbol: 'square', style: { fill: '#bfeec8', r: 5 } },
        },
        {
          value: '第一季度',
          name: '第一季度',
          marker: { symbol: 'square', style: { fill: '#5B8FF9', r: 5 } },
        },
        {
          value: '第二季度',
          name: '第二季度',
          marker: { symbol: 'square', style: { fill: ' #61DDAA', r: 5 } },
        },
        {
          value: '目标值',
          name: '目标值',
          marker: { symbol: 'line', style: { stroke: '#39a3f4', r: 5 } },
        },
      ],
    },
  })

  bulletPlot.render()
}

function renderIncome() {
  fetch('https://gw.alipayobjects.com/os/bmw-prod/1d565782-dde4-4bb6-8946-ea6a38ccf184.json')
    .then((res) => res.json())
    .then((data) => {
      const area = new Area('income', {
        data,
        xField: 'Date',
        yField: 'scales',
        xAxis: { range: [0, 1], tickCount: 5 },
        areaStyle: () => ({ fill: 'l(270) 0:#ffffff 0.5:#7ec2f3 1:#1890ff' }),
      })
      area.render()
    })
}

function renderSoldOut() {
  const data = [
    { type: '男生上衣', value: 27 },
    { type: '七分裤', value: 25 },
    { type: '包包', value: 18 },
    { type: '休闲鞋', value: 15 },
    { type: '连衣裙', value: 10 },
    { type: '其他', value: 5 },
  ]
  const piePlot = new Pie('soldOut', {
    appendPadding: 10,
    data,
    angleField: 'value',
    colorField: 'type',
    radius: 0.8,
    label: { type: 'outer', content: '{name} {percentage}' },
    interactions: [{ type: 'pie-legend-active' }, { type: 'element-active' }],
  })
  piePlot.render()
}

function renderCustomer() {
  const data = [
    {
      name: '男装',
      month: 'Jan.',
      sold: 18.9,
    },
    {
      name: '男装',
      month: 'Feb.',
      sold: 28.8,
    },
    {
      name: '男装',
      month: 'Mar.',
      sold: 39.3,
    },
    {
      name: '男装',
      month: 'Apr.',
      sold: 81.4,
    },
    {
      name: '男装',
      month: 'May',
      sold: 47,
    },
    {
      name: '男装',
      month: 'Jun.',
      sold: 20.3,
    },
    {
      name: '男装',
      month: 'Jul.',
      sold: 24,
    },
    {
      name: '男装',
      month: 'Aug.',
      sold: 35.6,
    },
    {
      name: '女装',
      month: 'Jan.',
      sold: 12.4,
    },
    {
      name: '女装',
      month: 'Feb.',
      sold: 23.2,
    },
    {
      name: '女装',
      month: 'Mar.',
      sold: 34.5,
    },
    {
      name: '女装',
      month: 'Apr.',
      sold: 99.7,
    },
    {
      name: '女装',
      month: 'May',
      sold: 52.6,
    },
    {
      name: '女装',
      month: 'Jun.',
      sold: 35.5,
    },
    {
      name: '女装',
      month: 'Jul.',
      sold: 37.4,
    },
    {
      name: '女装',
      month: 'Aug.',
      sold: 42.4,
    },
  ]

  const stackedColumnPlot = new Column('customer', {
    data,
    isGroup: true,
    xField: 'month',
    yField: 'sold',
    seriesField: 'name',
    label: {
      // 可手动配置 label 数据标签位置
      position: 'middle', // 'top', 'middle', 'bottom'
      // 可配置附加的布局方法
      layout: [
        // 柱形图数据标签位置自动调整
        { type: 'interval-adjust-position' },
        // 数据标签防遮挡
        { type: 'interval-hide-overlap' },
        // 数据标签文颜色自动调整
        { type: 'adjust-color' },
      ],
    },
  })

  stackedColumnPlot.render()
}
</script>

<style scoped lang="scss">
.chart-item {
  width: 100%;
  height: 180px;
}

.header {
  margin-bottom: $space-small;
}

.total {
  display: flex;
  align-items: flex-end;
  margin-left: $space-small;

  span {
    margin-right: $space-small-s;
  }
}
</style>